<template>
	<view class="index">
		<!-- <view class="head_box" style="height: 150rpx;background: #fff;" :style="{opacity: scrollTop}"></view> -->
		<!-- <Tabbar ref="tabbar"></Tabbar> -->
		<view class="indexSwiper">
			<image :src="imgConfig + 'images/index/index_bg1.png'" mode="widthFix" class="bg1"></image>
			<image :src="imgConfig + 'images/index/index_btn.png'" mode="widthFix" class="btn" @click="goBuy"></image>
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500"
				@change="bannerChange">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="item.url" mode="widthFix" :webp="true"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="banner-tag">
				<view class="nav" :class="{'navA':bannerIndex == item}" v-for="item in bannerList.length" :key="item">
				</view>
			</view>
		</view>
		<view class="indexCont">
			<image :src="imgConfig + 'images/index/index_bg2.png'" mode="widthFix"></image>
		</view>
		<!-- <view class="indexVideo" @tap.stop="play">
			<image :src="imgConfig + 'images/index/index_video.png'" mode="widthFix"></image>
			<image class="icon" :src="imgConfig + 'images/index/index_videoIcon.png'" mode="widthFix"></image>
		</view> -->
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	import Tabbar from '@/components/tabbar/tab.vue'
	export default {
		name: '',
		components: {
			Tabbar
		},
		props: {

		},
		data() {
			return {
				imgConfig: util.domainImg,
				shopInfo: {}, // 首页商品信息
				bannerList: [{
					url: util.domainImg + 'images/index/index_banner1.png'
				}, {
					url: util.domainImg + 'images/index/index_banner2.png'
				}, {
					url: util.domainImg + 'images/index/index_banner3.png'
				}],
				bannerIndex: 0,
				scrollTop: 0
			};
		},
		computed: {

		},
		watch: {

		},
		// 用户分享
		onShareAppMessage() {
			return {
				title: '艾公馆',
				path: 'pages/index/index'
			}
		},
		onLoad() {
			// uni.authorize({
			// 	scope: 'scope.userInfo',
			// 	success() {
			// 		uni.getUserInfo({
			// 			success(res) {
			// 				console.log(res.authSetting)
			// 			}
			// 		})
			// 	}
			// })
		},
		onShow() {
			this.getInfo();
			// this.$nextTick(() => {
			// 	app.globalData.tabName = '艾公馆';
			// 	this.$refs.tabbar.initInfo();
			// })
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			let scrollTop = 0;
			if (e.scrollTop < 101 && e.scrollTop >= 0) {
				this.scrollTop = e.scrollTop / 100
			} else {
				this.scrollTop = 1
			}
		},
		methods: {
			// 立即购买
			goBuy() {
				uni.navigateTo({
					url: '/pages_shop/goods/goods?id=' + this.shopInfo.homeGoods
				});
			},
			// 首页banner切换监听
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},
			// 播放首页视频
			// play() {
			// 	let url = this.imgConfig + 'images/llvideo.mp4';
			// 	uni.navigateTo({
			// 		url: '/pages/video/video?url=' + url,
			// 		animationType: 'zoom-out'
			// 	})
			// },
			// 获取首页商品信息
			getInfo() {
				// get请求示例
				util.request('index/appHomeGoods').then(res => {
					if (res.code === 0) {
						this.shopInfo = res.data;
					}
				});
				// post请求示例
				util.request('cart/updateSku', {
					skuId: this.selectGroup.id,
					goodsId: this.goods.id,
				}, "POST").then(res => {
					let _res = res;
					if (_res.code == 0) {
						this.getCartList();
						this.openAttr = !this.openAttr;
					} else {
						util.toast(_res.msg);
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: #FDCC8B;
	}

	.index {
		.indexBg {
			width: 100%;
			display: block;
		}

		.indexSwiper {
			width: 100%;
			height: 1100rpx;
			position: relative;
			overflow: hidden;

			.bg1 {
				width: 591rpx;
				position: absolute;
				left: 108rpx;
				top: 120rpx;
				z-index: 1;
			}

			.btn {
				width: 190rpx;
				position: absolute;
				left: 50%;
				margin-left: -95rpx;
				top: 390rpx;
				z-index: 1;
			}

			.swiper {
				width: 100%;
				height: 1100rpx;

				.swiper-item {
					image {
						width: 100%;
					}
				}
			}

			.banner-tag {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 60rpx;
				z-index: 100;

				.nav {
					display: inline-block;
					width: 40rpx;
					height: 6rpx;
					background: #FFFFFF;
					opacity: 0.4;
					border-radius: 2rpx;
					margin-right: 10rpx;

					&:last-child {
						margin-right: 0;
					}
				}

				.navA {
					opacity: 1;
				}
			}
		}

		.indexCont {
			width: 100%;
			height: 230rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 628rpx;
			}
		}

		.indexVideo {
			width: 100%;
			padding-bottom: 10rpx;
			position: relative;

			image {
				width: 100%;
				display: block;
			}

			.icon {
				width: 80rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -40rpx 0 0 -40rpx;
			}
		}
	}
</style>